<template>
  <div class="search-page">
    <!-- Top Navigation -->
    <top-nav
      :username="username"
      v-model:is-dark="isDark"
    />

    <!-- Main Content -->
    <div class="main-content">
      <!-- Left Sidebar -->
      <div class="sidebar">
        <div class="sidebar-header">
          <el-checkbox
            v-model="allSelected"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
        </div>
        <div class="knowledge-list">
          <el-checkbox-group v-model="selectedKnowledgeBases" @change="handleCheckedChange">
            <div v-for="item in knowledgeBases" :key="item.id" class="knowledge-item">
              <el-checkbox :label="item.id">
                <div class="knowledge-info">
                  <el-icon><FolderOpened /></el-icon>
                  <span class="name">{{ item.name }}</span>
                  <span class="count">({{ item.count }})</span>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>

      <!-- Search Area -->
      <div class="search-area">
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索"
            class="search-input"
            size="large"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button type="primary" :icon="Position" @click="handleSearch">
                搜索
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- Search Results -->
        <div v-if="hasSearched" class="search-results">
          <div class="search-stats">
            找到 {{ total }} 条结果 ({{ searchTime }}秒)
          </div>
          
          <el-empty v-if="results.length === 0" description="暂无搜索结果" />
          
          <template v-else>
            <div v-for="(result, index) in results" :key="index" class="result-item">
              <h3 class="result-title">{{ result.title }}</h3>
              <p class="result-content" v-html="result.content"></p>
              <div class="result-meta">
                <span class="source">来源：{{ result.source }}</span>
                <span class="date">{{ result.date }}</span>
                <el-tag size="small" type="info">{{ result.type }}</el-tag>
              </div>
            </div>
          </template>

          <!-- Pagination -->
          <div v-if="results.length > 0" class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSearch"
              @current-change="handleSearch"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Position, FolderOpened } from '@element-plus/icons-vue'
import TopNav from '../components/TopNav.vue'

// Data
const username = ref('qinzhenlong')
const isDark = ref(false)
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchTime = ref(0)
const hasSearched = ref(false)

// Knowledge bases data
const knowledgeBases = ref([
  { id: 1, name: 'BAAI/bge-large-zh-v1.5', count: 128 },
  { id: 2, name: 'test', count: 35 }
])

const selectedKnowledgeBases = ref([])
const allSelected = ref(false)
const isIndeterminate = computed(() => {
  const selected = selectedKnowledgeBases.value.length
  return selected > 0 && selected < knowledgeBases.value.length
})

// Mock search results
const results = ref([
  {
    title: '能监办大模型交流要点.docx',
    content: '...在<em>大模型</em>技术交流会议上，专家们讨论了<em>人工智能</em>在电力监管领域的应用前景...',
    source: '知识库/会议记录',
    date: '2024-04-16',
    type: 'DOCX'
  }
])

// Methods
const handleCheckAllChange = (val) => {
  selectedKnowledgeBases.value = val ? knowledgeBases.value.map(item => item.id) : []
}

const handleCheckedChange = (value) => {
  const checkedCount = value.length
  allSelected.value = checkedCount === knowledgeBases.value.length
}

const handleSearch = () => {
  if (!searchQuery.value.trim() || selectedKnowledgeBases.value.length === 0) return
  
  // Mock search API call
  hasSearched.value = true
  total.value = results.value.length
  searchTime.value = 0.35
}
</script>

<style scoped lang="scss">
.search-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color-page);
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 280px;
  border-right: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
  display: flex;
  flex-direction: column;

  .sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .knowledge-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    .knowledge-item {
      margin-bottom: 12px;

      .knowledge-info {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 8px;

        .el-icon {
          color: var(--el-text-color-secondary);
        }

        .name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .count {
          color: var(--el-text-color-secondary);
          font-size: 13px;
        }
      }
    }
  }
}

.search-area {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;

  .search-box {
    width: 100%;
    max-width: 800px;
    margin-bottom: 40px;

    .search-input {
      :deep(.el-input-group__append) {
        padding: 0;
        
        .el-button {
          margin: 0;
          border: none;
          height: 40px;
          padding: 0 20px;
        }
      }
    }
  }

  .search-results {
    width: 100%;
    max-width: 800px;

    .search-stats {
      margin-bottom: 20px;
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }

    .result-item {
      padding: 20px;
      margin-bottom: 16px;
      background-color: var(--el-bg-color);
      border-radius: 8px;
      border: 1px solid var(--el-border-color-light);

      .result-title {
        margin: 0 0 12px;
        font-size: 18px;
        color: var(--el-color-primary);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .result-content {
        margin: 0 0 12px;
        color: var(--el-text-color-regular);
        font-size: 14px;
        line-height: 1.6;

        :deep(em) {
          font-style: normal;
          color: var(--el-color-danger);
        }
      }

      .result-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        color: var(--el-text-color-secondary);
        font-size: 13px;
      }
    }

    .pagination {
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  }
}
</style> 